<template>
  <div>
    <div class="el-card-body">
      <i class="el-icon-tickets"
         style="margin-top: 5px;">
      </i>
      <span style="margin-top: 5px;">
        二级菜单
      </span>
      <el-button
        type="primary" size="mini" icon="el-icon-delete" style="margin-left: 86%" @click="addMenu(false)">添加
      </el-button>
    </div>
    <el-table
      :data="tableData"
      stripe
      border
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="id"
        label="ID"
        width="60">
      </el-table-column>
      <el-table-column
        prop="parentId"
        label="parentId"
        width="100">
      </el-table-column>
      <el-table-column
        prop="url"
        label="url"
        width="160">
      </el-table-column>
      <el-table-column
        prop="path"
        label="路径"
        width="160">
      </el-table-column>
      <el-table-column
        prop="component"
        label="组件名称"
        width="140">
      </el-table-column>
      <el-table-column
        prop="name"
        label="菜单名"
        width="140">
      </el-table-column>
      <el-table-column
        prop="requireAuth"
        label="权限"
        width="160">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.requireAuth"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="要求权限"
            disabled>
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="enabled"
        label="是否启用">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.enabled"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="启用"
            inactive-text="禁用"
            disabled>
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="warning" size="mini"
            @click="showEditView(scope.$index, scope.row,true)" plain>修改
          </el-button>
          <el-button
            type="danger" size="mini"
            @click="handleDelete(scope.$index, scope.row)" plain>删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--弹框-->
    <el-dialog title="弹框" :visible.sync="dialogVisible" :center="true" width="600px">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="父id" prop="parentId">
          <el-input v-model="formData.parentId" placeholder="请输入父id" readonly clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="url" prop="url">
          <el-input v-model="formData.url" placeholder="请输入url"  clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="路径" prop="path">
          <el-input v-model="formData.path" placeholder="请输入路径"  clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="权限" prop="requireAuth" required>
          <el-switch v-model="formData.requireAuth" active-text="需要权限" active-color="#39C615"></el-switch>
        </el-form-item>
        <el-form-item label="组件名" prop="component">
          <el-input v-model="formData.component" placeholder="请输入组件名"  clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="是否启用" prop="enabled" required>
          <el-switch v-model="formData.enabled" active-text="启用"></el-switch>
        </el-form-item>
        <el-form-item label="菜单名" prop="name">
          <el-input v-model="formData.name" placeholder="请输入菜单名" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'SecurityChild',
    data () {
      return {
        tableData: [],
        dialogVisible:false,
        formData: {
          parentId: "",
          url: "",
          path: "",
          requireAuth: true,
          component: "",
          enabled: true,
          name: undefined,
        },
        isEdit:'',
        rules: {
          parentId: [{
            required: true,
            message: '请输入父id',
            trigger: 'blur'
          }],
          url: [{
            required: true,
            message: '请输入url',
            trigger: 'blur'
          }],
          path: [{
            required: true,
            message: '请输入路径',
            trigger: 'blur'
          }],
          iconCls: [{
            required: true,
            message: '请输入图标',
            trigger: 'blur'
          }],
          component: [{
            required: true,
            message: '请输入组件名',
            trigger: 'blur'
          }],
          name: [{
            required: true,
            message: '请输入菜单名',
            trigger: 'blur'
          }],
        },
      }
    },
    mounted () {
      this.initTable();
    },
    methods: {
      //删除事件
      handleDelete(index,data){
        this.$confirm('此操作将删除菜单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRequest('/security/data/menu/'+data.id).then(resp=>{
            this.initTable();
            this.$notify.success({ title: '成功', message: resp.message });
          })
        }).catch(() => {
          this.$notify.info({ title: '消息', message: '已取消删除' });
        });
      },
      //显示修改弹出框赋值
      showEditView(index,data,edit){
        this.isEdit=edit
        Object.assign(this.formData,data);
        this.dialogVisible=true;
      },
      // 显示添加弹出框赋值
      addMenu(edit){
        this.isEdit=edit
        this.formData.url=''
        this.formData.name=''
        this.formData.path=''
        this.formData.component=''
        this.dialogVisible=true
      },
      // 添加、修改菜单
      handelConfirm() {
        //修改事件
        if(this.isEdit){
          this.$refs['elForm'].validate(valid => {
            if (!valid) return
            this.putRequest('/security/data/menu',this.formData).then(resp=>{
              if (resp){
                this.dialogVisible=false;
                this.$notify.success({ title: '成功', message: resp.message });
                this.initTable();
              }
            })
          })
        }else{
          // 添加事件
          this.$refs['elForm'].validate(valid => {
            if (!valid) return
            this.postRequest('/security/data/menu',this.formData).then(resp => {
              if (resp) {
                this.$notify.success({ title: '成功', message: resp.message });
                this.dialogVisible=false;
                this.initTable()
              }
            })
          })
        }
      },
      //查询二级菜单列表
      initTable () {
        // 取到SecurityData页面的路由带过来的参数
        let routerParams = this.$route.params.name;
        this.formData.parentId=routerParams
        console.log('我过来了'+routerParams);
        this.getRequest('/security/data/menu/'+routerParams).then(resp => {
          if (resp) {
            this.tableData = resp;
          }
        })
      },
    }
  }

</script>

<style scoped>
  .el-card-body {
    width: 97%;
    padding: 10px;
    border-style:solid;
    border-width: 1px;
    border-color: #ddded9;
    margin: 20px 0px;
  }

</style>
